<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="position: relative;">
    <canvas id="myCanvas" width="200" height="100"
        style="border:1px solid #c3c3c3;position:absolute;top:50px;left: 100px;">
        Your browser does not support the canvas element.
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.moveTo(10, 10);
        cxt.lineTo(150, 50);
        cxt.lineTo(10, 50);
        cxt.stroke();
        c.onmousedown = function (args) {
            var evt = args || event;
            var StartX = evt.clientX;
            var StartY = evt.clientY;
            let initleft = Number((c.style.left).replace('px', ''))
            let inittop = Number((c.style.top).replace('px', ''))
            document.onmousemove = function (ev) {
                var iEvent = ev || event;
                // 鼠标移动的距离
                let left = iEvent.clientX - StartX;
                let top = iEvent.clientY - StartY;
                // 鼠标移动的距离 + 最开始的top 或者 left 就是最终的位置
                c.style.left = left + initleft + 'px';
                c.style.top = top + inittop + 'px';
            }
            document.onmouseup = function () {
                document.onmousedown = null;
                document.onmousemove = null;
            };
            return false;
        }
    </script>
</body>

</html>